<template>
    <!-- 查询和操作区域 -->
    <div class="page-header">
        <div class="search-toolbar" v-permission="'sys:log:read'">
            <el-input v-model="params.opUserName" @keyup.enter="init" style="width: 120px;margin-right:5px;"
                placeholder="账号" clearable />
            <el-input v-model="params.methodName" @keyup.enter="init" style="width: 120px;margin-right:5px;"
                placeholder="方法名" clearable />
            <el-input v-model="params.opIp" @keyup.enter="init" style="width: 120px;margin-right:5px;"
                placeholder="IP地址" clearable />
            <el-select v-model="params.opStatus" clearable placeholder="操作状态" style="width: 100px;margin-right:5px">
                <el-option v-for="item in opStatusList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-date-picker style="width: 360px;margin-right:5px;" v-model="datetimePicker" type="datetimerange"
                start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD"
                value-format="YYYY-MM-DDTHH:mm:ss.000Z" time-format="HH:mm:ss" @change="handleDatetime"
                @clear="clearDatetime" />
            <el-button type="primary" @click="init">查询</el-button>
            <el-button type="info" @click="reset">重置</el-button>
        </div>
        <div class="toolbar">
            <el-button v-permission="'sys:log:read'" type="info" @click="init">刷新</el-button>
        </div>
    </div>
    <!-- 表格区域 -->
    <div class="page-main">
        <el-table :data="tableData" style="width: 100%" stripe max-height="calc(100vh - 190px)" >
            <el-table-column align="center" fixed prop="opUserName" label="账号" width="100" />
            <el-table-column align="center" fixed prop="opIp" label="IP地址" width="150" />
            <el-table-column align="center" fixed prop="model" label="系统模块" width="100" />
            <el-table-column align="center" fixed prop="bizType" label="业务类型" width="100" />
            <el-table-column align="center" fixed prop="methodName" label="方法名" width="200" />
            <el-table-column align="center" fixed prop="methodType" label="请求类型" width="80" />
            <el-table-column align="center" label="Url地址" width="240">
                <template #default="{ row }">
                    <el-text truncated>
                        {{ row.opUrl }}
                    </el-text>
                </template>
            </el-table-column>
            <el-table-column align="center" label="请求参数" width="200">
                <template #default="{ row }">
                    <el-text truncated>
                        {{ row.opParam }}
                    </el-text>
                </template>
            </el-table-column>
            <el-table-column align="center" label="结果" width="80">
                <template #default="{ row }">
                    <el-tag effect="light" :type="row.opStatus ? 'success' : 'info'" disable-transitions>
                        {{ row.opStatus ? '成功' : '失败' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="失败信息" width="200">
                <template #default="{ row }">
                    <el-text truncated>
                        {{ row.opErrorMsg }}
                    </el-text>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作时间" width="200">
                <template #default="{ row }">
                    {{ row.opDatetime && format(row.opDatetime, 'yyyy-MM-dd HH:mm:ss') }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="opExecTime" label="执行时长(毫秒)" width="120" />
        </el-table>
    </div>
    <!-- 分页区域 -->
    <div class="page-footer">
        <el-pagination v-model:current-page="params.current" v-model:page-size="params.pageSize"
            :page-sizes="[10, 20, 30, 50]" size="small" layout="total, sizes, prev, pager, next, jumper," :total="total"
            @size-change="init" @current-change="init" />
    </div>
</template>

<script setup>
import { get } from '@/utils/request'
import { onMounted, ref } from 'vue'
import { format } from 'date-fns'

//表格数据
const tableData = ref([])

//表格总数
const total = ref(0)

//时间选择器
const datetimePicker = ref([])

//查询参数
const params = ref({
    opUserName: '',
    methodName: '',
    opIp: '',
    opStatus: '',
    startTime: '',
    endTime: '',
    current: 1,
    pageSize: 10
})

//操作状态列表
const opStatusList = [
    {
        value: '0',
        label: '失败',
    },
    {
        value: '1',
        label: '成功',
    }
]

//页面挂在完毕，执行初始化方法
onMounted(() => {
    init()
})

//页面初始化方案
const init = async () => {
    const loadingInstance = ElLoading.service({
        target: document.querySelector('.page-main'),
        fullscreen: false,
        lock: true,
        text: '加载中...'
    })
    const res = await get('sysLog/getSysLogList', {
        'opUserName': params.value.opUserName,
        'model': params.value.model,
        'bizType': params.value.bizType,
        'methodName': params.value.methodName,
        'methodType': params.value.methodType,
        'opIp': params.value.opIp,
        'opStatus': params.value.opStatus,
        'startTime': params.value.startTime,
        'endTime': params.value.endTime,
        'current': params.value.current,
        'size': params.value.pageSize
    })
    loadingInstance.close()
    tableData.value = res.data.list
    total.value = res.data.total
}

const handleDatetime = () => {
    if (datetimePicker.value) {
        params.value.startTime = datetimePicker.value[0]
        params.value.endTime = datetimePicker.value[1]
    }
}

const clearDatetime = () => {
    params.value.startTime = ''
    params.value.endTime = ''
}

const reset = () => {
    console.info('reset')
    Object.assign(params.value, {
        opUserName: '',
        methodName: '',
        opIp: '',
        opStatus: '',
        startTime: '',
        endTime: '',
        current: 1,
        pageSize: 10
    });
}

</script>

<style lang="less" scoped>
.page-header {
    height: 50px;
    display: flex;
    justify-content: space-between;
}

.page-footer {
    height: 50px;
    display: flex;
    justify-content: flex-end;
}
</style>
